<template>
  <div class="hotelparticulars">
    <!-- 面包屑 -->
    <div class="Breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">酒店</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/hotel'}">{{particularsarr[0].real_city}}酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{particularsarr[0].name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 标题 -->
    <div class="title">
      <h2>
        {{particularsarr[0].name}}
        <i
          v-for="(value,index) in particularsarr[0].hotellevel.level"
          :key="index"
          hotellevel
          class="iconfont iconhuangguan"
        ></i>
      </h2>
      <span>{{particularsarr[0].alias}}</span>
      <br />
      <span>
        <i class="iconfont iconlocation"></i>
        {{particularsarr[0].address}}
      </span>
    </div>
    <!-- 图片详情 -->
    <div class="imgs">
      <div class="left">
        <img :src="big" alt />
      </div>
      <div class="right">
        <img
          @click="headleBig(index)"
          v-for="(value,index) in ppiiccss"
          :key="index"
          :src="value"
          alt="aaaaaa"
        />
      </div>
    </div>
    <!-- 价格 -->
    <div class="price">
      <table>
        <thead>
          <tr>
            <td>价格来源</td>
            <td>低价房型</td>
            <td>最低价格/每晚</td>
          </tr>
        </thead>
        <tbody>
          <tr
            @click="headlelink(value.name)"
            v-for="(value,index) in particularsarr[0].products"
            :key="index"
          >
            <td>{{value.name}}</td>
            <td>{{value.bestType}}</td>
            <td>
              <span>￥{{value.price}}</span>起
              <span>></span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 地图 -->
    <div class="map">
      <div class="mapImg">
        <div id="container"></div>
      </div>
      <div class="add">
        <div class="addtitle">
          <span
            @click="currentIndex=index"
            v-for="(value,index) in ['风景','交通']"
            :key="index"
            :class="currentIndex===index?'action':''"
          >{{value}}</span>
        </div>
        <div class="addParticulars">
          <ol v-if="currentIndex===0">
            <li
              @mouseover="mouseover(value.id,index)"
              v-for="(value,index) in scenicsarr"
              :key="index"
            >
              <span>{{value.name}}</span>
              <span>4343公里</span>
            </li>
          </ol>
          <ol>
            <li v-for="(value,index) in traffic" :key="index">
              <span>{{value.name}}</span>
              <span>4343公里</span>
            </li>
          </ol>
        </div>
      </div>
    </div>
    <!-- 酒店信息 -->
    <div class="presentation">
      <table>
        <tbody>
          <tr>
            <td>基本信息</td>
            <td>入住时间：14:00之后</td>
            <td>商店：12:00之前</td>
            <td>2010年开业/{{particularsarr[0].renovat_time}}</td>
            <td>酒店规模：{{particularsarr[0].roomCount}}间房</td>
          </tr>
          <tr>
            <td>主要设施</td>
            <td colspan="4">
              <span>外币兑换服务</span>
              <span>电梯</span>
              <span>洗衣服务</span>
              <span>热水壶</span>
            </td>
          </tr>
          <tr>
            <td>停车服务</td>
            <td colspan="4">-</td>
          </tr>
          <tr>
            <td>品牌信息</td>
            <td colspan="4">-</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <p>0条真实用户评论</p>
      <table>
        <tbody>
          <tr>
            <td>总评数：{{particularsarr[0].very_bad_remarks+particularsarr[0].very_good_remarks}}</td>
          </tr>
          <tr>
            <td>好评数：{{particularsarr[0].very_good_remarks}}</td>
            <td>
              <!-- 推荐 -->
              <div class="recommend">推荐</div>
              <el-rate
                v-model="value5"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
            </td>
            <td v-for="(value,index) in scores" :key="index">
              <el-progress
                class="yuan"
                type="circle"
                :text-inside="true"
                :percentage="value.num*10"
                :stroke-width="4"
                status="warning"
                :width="80"
              ></el-progress>
              {{value.type}}
            </td>
          </tr>
          <tr>
            <td>差评数：{{particularsarr[0].very_bad_remarks}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    // hotelMap
  },
  data() {
    return {
      traffic:[],
      map: null,
      value5: 0,
      city: "",
      // 酒店详细数据
      big: "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
      ppiiccss: [
        "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/2.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/3.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/4.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/5.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/6.jpeg"
      ],
      // 酒店详细数据
      particularsarr: [
        {
          location: {},
          hotellevel: {},
          city: {}
        }
      ],
      scores: [],
      // 景点的地址数据
      scenicsarr: [],
      currentIndex: 0,
      // 景点地址的经纬度
      positions: [118.869265, 31.31952],
      markers: []
    };
  },
  mounted() {
    this.getData(() => {
      // 1 定义 高度地图 js 路径
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=c92f0d69cbdf00ebaf248e710e4d0453&callback=onLoad";
      // 2 手动创建了一个script标签
      var url1 = "https://webapi.amap.com/ui/1.0/main.js?v=1.0.11";
      var jsapi = document.createElement("script");
      var jsapi1 = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi1.charset = "utf-8";
      // 3 定义 script标签的 引入地址
      jsapi.src = url;
      jsapi1.src = url1;
      // 4 把script标签 放入到 html标签的 head标签的中
      document.head.appendChild(jsapi);
      document.head.appendChild(jsapi1);
      // console.log(this.$route.params.id);

      // console.log(this.scenicsarr);
      let a = this.scenicsarr;
      window.onLoad = () => {
        // console.log(this.positions);
        // 5  js 加载完毕了！！！
        var map = new AMap.Map("container", {
          // 地图的缩放倍数r5
          zoom: 15,
          // 要显示的经纬度[经度，纬度]

          center: [118.869265, 31.31952]
        });

        this.map = map;

        // console.log(a);

        let markers = [];
        for (let i = 0; i < a.length; i++) {
          var marker = new AMap.Marker({
            content: `<div style=" position: relative;" class="custom-content-marker"> 
           <img style="width:25px;height:40px" src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">
           <div style=" position: absolute; top:8px; left:6px;color:#fff;">${i +
             1}</div> 
         </div>`,
            // 点标记的坐标
            // position: a[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            position: new AMap.LngLat(...a[i].location.split(",")),
            // 鼠标移入的时候的提示
            title: a[i].name
          });

          markers.push(marker);
        }
        // console.log(markers)
        this.markers = markers;
        map.add(markers);
      };
    });
  },
  methods: {
    // 处理链接
    headlelink(name) {
      if (name === "携程") {
        // 在新页面打开
        window.open("https://hotels.ctrip.com/hotel/694679.html");
      } else if (name === "艺龙") {
        window.open("https://hotels.ctrip.com/hotel/694679.html");
      } else if (name === "Hotels.com") {
        window.open("https://hotels.ctrip.com/hotel/694679.html");
      }
    },
    // 处理图片的显示
    headleBig(index) {
      console.log(12);
      this.ppiiccss.forEach((e, i) => {
        if (index === i) {
          this.big = e;
        }
      });
    },
    // 封装请求
    async getData(cb) {
      // 请求全部的数据
      let res = await this.$axios.get("/hotels?id=" + this.$route.params.id);
      // console.log(res);
      this.particularsarr = res.data.data;
      this.value5 = res.data.data[0].stars;
      // console.log(this.value5);
      // console.log(res.data.data[0].real_city)
      this.city = res.data.data[0].real_city;
      // console.log(this.city);
      this.scores = [
        { type: "环境", num: this.particularsarr[0].scores.environment },
        { type: "产品", num: this.particularsarr[0].scores.product },
        { type: "服务", num: this.particularsarr[0].scores.service }
      ]
      // 请求风景的地点
      let r = await this.$axios.get(
        `https://restapi.amap.com/v3/place/text?keywords=&city=${res.data.data[0].real_city}
        &location=${res.data.data[0].location.longitude},${res.data.data[0].location.latitude}&types=风景名胜&output=json&page=1&offset=10&key=79041dfa1c752f49599e2b507c64da42`
      );
      console.log(r);
      this.scenicsarr = r.data.pois;
      // console.log(this.scenicsarr)
      // 请求路线
      let r1=await this.$axios.get(`https://restapi.amap.com/v3/place/text?keywords=&city=${res.data.data[0].real_city}&location=${res.data.data[0].location.longitude},${res.data.data[0].location.latitude}&types=交通设施服务&output=json&page=1&offset=10&key=79041dfa1c752f49599e2b507c64da42`)
// console.log(r1)
this.traffic=r1.data.pois
// console.log(this.traffic)
      cb && cb();
    },
    // 鼠标移入事件
    mouseover(id, index) {
      this.scenicsarr.forEach(v => {
        if (v.id === id) {
          this.map.setCenter(new AMap.LngLat(...v.location.split(",")));
          // console.log(this.markers);
          AMapUI.loadUI(["overlay/SimpleInfoWindow"], (
            SimpleInfoWindow
          )=> {
            var marker = this.markers[0]
            // console.log(marker)
            var infoWindow = new SimpleInfoWindow({
              // infoTitle: "<strong>这里是标题</strong>",
              infoBody:v.name,

              //基点指向marker的头部位置
              offset: new AMap.Pixel(0, -31)
            });
            var map = this.map;
            function openInfoWin() {
              infoWindow.open(map, marker.getPosition());
            }

            //marker 点击时打开
            AMap.event.addListener(marker, "click", function() {
              openInfoWin();
            });

            openInfoWin();
          });
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
.hotelparticulars {
  width: 1000px;
  margin: 0 auto;
  .Breadcrumb {
    margin: 10px 0;
  }
  .title {
    margin: 20px 0;
    h2 {
      font-size: 20px;
      i {
        color: orange;
      }
    }
    span {
      font-size: 12px;
      line-height: 20px;
    }
  }
  .imgs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .left {
      flex: 8;
      img {
        width: 640px;
        height: 360px;
      }
    }
    .right {
      flex: 4;
      img {
        width: 160px;
        height: 110px;
      }
      img:nth-child(3),
      img:nth-child(4) {
        margin: 12px 0;
      }
      img:nth-child(even) {
        margin-left: 8px;
      }
    }
  }
  .price {
    table {
      width: 100%;
      text-align: left;
      tr {
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        td:nth-child(3) {
          width: 20%;
        }
      }
      thead {
        tr {
          font-weight: bold;
          color: #ccc;
        }
      }
      tbody {
        tr {
          td {
            font-size: 12px;
            span {
              color: orange;
            }
          }
        }
      }
    }
  }
  .presentation {
    margin: 20px 0;
    table {
      width: 100%;
      tr {
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        td {
          span {
            background-color: #eee;
            border-radius: 2px;
            padding: 0 10px;
          }
        }
      }
    }
  }
  .action {
    border-bottom: 1px solid skyblue;
    line-height: 50px;
    color: skyblue;
  }
  .map {
    /deep/.amap-ui-smp-ifwn-content-body{
      border:none;
    }
    /deep/.amap-ui-smp-ifwn-info-title{
      border:none; 
    }
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    .mapImg {
      flex: 8;
      padding-right: 20px;
      #container {
        width: 100%;
        height: 360px;
      }
    }
    .add {
      flex: 4;
      .addtitle {
        span {
          display: inline-block;
          // margin-right: 30px;
          padding: 0 20px;
        }
        border-bottom: 1px solid #ccc;
      }
      .addParticulars {
        width: 330px;
        height: 300px;
        overflow-y: auto;
        ol {
          li {
            font-size: 14px;
            line-height: 20px;
            font-weight: normal;
            line-height: 30px;
            color: black;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .comment {
    padding: 20px 0;

    p {
      font-weight: bold;
      margin: 20px 0;
    }
    table {
      width: 100%;
      tr {
        line-height: 25px;
      }
      tr:nth-child(2) {
        color: orange;
        td:nth-child(1) {
          color: black;
        }
        td:nth-child(2) {
          position: relative;
          .recommend {
            width: 50px;
            border: 1px solid orange;
            color: orange;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            position: absolute;
            top: -10px;
            left: 28px;
            transform: rotate(-20deg);
          }
        }
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5) {
          position: relative;
          .yuan {
            position: absolute;
            top: -25px;
            left: -25px;
          }
        }
      }
    }
  }
}
</style>